import React, { Component } from 'react';
import './body.css';
import './bodyRight.css';
import { Modal,Input,Tabs,Icon,Button } from 'antd';
import {RoomDetailLike} from './RoomDetail'
import roomImg from '../../image/room.jpg'
import {Link} from 'react-router-dom';
const TabPane = Tabs.TabPane;

class BodyRight extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loginModalVisible:false,
            likeModalVisible:false,
            collapsed:false,
            bodyRightVisible:false,
            lookModalVisible:false
        }
        this.loginModalHandleOk=this.loginModalHandleOk.bind(this)
    }

    loginButton=()=>{
        this.setState({
            loginModalVisible:true
        })
    }
    loginModalHandleOk=(e)=>{
        console.log(document.getElementById('loginForm'));
        this.setState({
            loginModalVisible:false
        })

    }
    loginModalhandleCancel=()=>{
        this.setState({
            loginModalVisible:false
        })
    }
    TabsOnchange=()=>{

    }
    showUserInfo=()=>{
        let bodyRightWidth=document.getElementById('bodyRight').offsetWidth;
        if(!this.state.bodyRightVisible)
        {
            let bodyRightDom=document.getElementById("bodyRight");
            bodyRightDom.style.transform="translate(0px,0px)";
        }
        else
        {
            let bodyRightDom=document.getElementById("bodyRight");
            bodyRightDom.style.transform="translate(+"+(bodyRightWidth*0.625)+"px,"+0+"px)";
        }
        this.setState({
            bodyRightVisible:!this.state.bodyRightVisible
        })
    }
    render() {
        return (
            <div id="bodyRight" >
                {/*触发按钮*/}
                <Button className="userInfoButton" type="primary" shape="circle"
                        icon={this.state.bodyRightVisible ? 'menu-unfold' : 'menu-fold'}
                        onClick={this.showUserInfo} style={{ marginBottom: 16 }}>
                    {/*<Icon type={this.state.bodyRightVisible ? 'menu-unfold' : 'menu-fold'} />*/}
                </Button>
                {/*用户信息区域*/}
                <div className="userInfo">
                    {
                        !!localStorage.avatar?
                        <img src={localStorage.avatar} className="userInfoAevter" alt="头像"/>:
                        <div className="userInfoAevter" onClick={this.loginButton}>未登录</div>
                    }
                    <BodyRightBody img="heart" text="我喜欢的" onClick={()=>{this.setState({likeModalVisible:!this.state.likeModalVisible})}}/>
                    <BodyRightBody img="eye" text="我浏览的" onClick={()=>this.setState({lookModalVisible:!this.state.lookModalVisible})}/>
                    <BodyRightBody img="message" text="我的消息"/>
                    <BodyRightBody img="user" text="个人中心"/>
                    <Link to="/app/admin/index">
                        <BodyRightBody img="user" text="管理中心"/>
                    </Link>
                    {
                        !!localStorage.avatar?
                        <BodyRightBody img="close" text="退出登录"/>:null
                    }
                </div>

                 {/*登录弹出框*/}
                <Modal
                    visible={this.state.loginModalVisible}
                    onOk={this.loginModalHandleOk}
                    okText="确定"
                    cancelText="取消"
                    onCancel={this.loginModalhandleCancel}
                >
                    <Tabs defaultActiveKey="1" onChange={this.TabsOnchange}>
                        <TabPane tab="登录" key="1">
                            <form id="loginForm">
                                <p className="modalP">
                                    <Input addonBefore="账号：" placeholder="请输入用户名" name="username"/>
                                </p>
                                <p className="modalP">
                                    <Input addonBefore="密码：" placeholder="请输入密码" name="password"/>
                                </p>
                            </form>
                            <Input type="button" value="登录" className="loginButton" onClick={this.loginModalHandleOk}/>
                        </TabPane>
                        <TabPane tab="注册" key="2">
                            <p className="modalP"><Input addonBefore="手机号："  placeholder="请输入手机号" className="modalInput"/></p>
                        </TabPane>
                    </Tabs>

                </Modal>
                {/*喜欢弹出框*/}
                <Modal
                    visible={this.state.likeModalVisible}
                    onOk={()=>{this.setState({likeModalVisible:!this.state.likeModalVisible})}}
                    okText="确定"
                    cancelText="取消"
                    title="我的喜欢"
                    onCancel={()=>{this.setState({likeModalVisible:!this.state.likeModalVisible})}}
                >

                    <RoomDetailLike img={roomImg} likeCount={100} address="百货中心" price="100" more="好"
                                    onClick={()=>this.setState({likeModalVisible:!this.state.likeModalVisible})}/>
                    <RoomDetailLike img={roomImg} likeCount={100} address="百货中心" price="100" more="好"
                                    onClick={()=>this.setState({likeModalVisible:!this.state.likeModalVisible})}/>
                </Modal>
                {/*浏览弹出框*/}
                <Modal
                    visible={this.state.lookModalVisible}
                    onOk={()=>this.setState({lookModalVisible:!this.state.lookModalVisible})}
                    okText="确定"
                    cancelText="取消"
                    title="我的浏览"
                    onCancel={()=>this.setState({lookModalVisible:!this.state.lookModalVisible})}
                >

                    <RoomDetailLike img={roomImg} likeCount={100} address="百货中心" price="100" more="好"
                                    onClick={()=>this.setState({lookModalVisible:!this.state.lookModalVisible})}/>
                    <RoomDetailLike img={roomImg} likeCount={100} address="百货中心" price="100" more="好"
                                    onClick={()=>this.setState({lookModalVisible:!this.state.lookModalVisible})}/>
                </Modal>
            </div>

        );
    }
}
class BodyRightBody extends Component {
    render() {
        return (
            <div className="bodyRightElse" onClick={this.props.onClick}>
                <Icon type={this.props.img} />
                <span>{this.props.text}</span>
            </div>
        )
    }
}
export default BodyRight;
